<template>
  <div py-30px border-b-1>
    <a-space>
      <div w-90px>图片</div>
      <div>
        <div
          v-if="(isRes && props!.res!.data.list![0]!.img) || (!isRes && props.item?.img)"
        >
          <a-image
            :src="!!props.res ? props.res.data.list![0]!.img : props.item?.img"
            width="100"
          >
          </a-image>
          <a-tooltip content="清空图片">
            <div
              @click="clear()"
              color-gray
              h-35px
              line-height-35px
              cursor-pointer
              text-center
            >
              清空
            </div>
          </a-tooltip>
        </div>
        <div flex items-end gap-8px>
          <a-button flex-1 @click="openUpload()"
            ><template #icon><icon-image /></template>本地上传</a-button
          >
        </div>
      </div>
    </a-space>
    <uploadPicker :limit="1" @onChange="callback" ref="uploadRef" />
  </div>
</template>

<script setup lang="ts">
import uploadPicker from '@/components/upload-pic/draw-upload.vue'
import configs from '@/config/index'
import { DragRule } from '@/views/operation/decoration/app/models/types'
import { computed, ref } from 'vue'
const props = defineProps<{
  res?: DragRule
  item?: {
    img: string
    url: string
  }
}>()

const isRes = computed<boolean>(() => !!props.res)
const uploadRef = ref<any>(null)

// 回调图片
function callback(url: string) {
  if (!url) return
  if (!props.item) {
    props!.res!.data.list![0]!.img = url
  } else {
    props.item.img = url
  }
}

// 清空上传图片
function clear() {
  if (!props.item) {
    props!.res!.data.list![0]!.img = configs.INVENT.EMPTY_IMAGE
  } else {
    props.item.img = configs.INVENT.EMPTY_IMAGE
  }
}

const openUpload = () => {
  uploadRef.value.open()
}
</script>

<style scoped></style>
